<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0, 0, 0, 0.3);
            /* 以html 视口(view port)为参照物,紧贴四个边,实现撑满页面*/
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;

        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
<!--    lorem*60-->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eaque fugit magnam molestiae odit, quam quo
        voluptates. Ab aspernatur excepturi hic natus nisi. Cum eveniet inventore mollitia nemo odit tempora?
    </div>
    <div>Assumenda dicta eligendi, incidunt ipsam nisi numquam officiis praesentium, quae quas repellat, saepe tempore
        vel voluptatum? Aliquam consequatur dignissimos dolore necessitatibus? Accusantium aspernatur dolore fuga harum
        labore recusandae repellat, saepe!
    </div>
    <div>Consectetur cumque et facilis fugit harum ipsum numquam quisquam repellendus? Expedita facere fugiat illo
        magnam magni nam nostrum perferendis possimus, recusandae totam. Aut eaque impedit minima odio officia possimus
        tenetur.
    </div>
    <div>Aut consequatur distinctio dolores eos eveniet expedita facere fugiat illo ipsum libero molestiae nemo neque,
        odit pariatur possimus quaerat quam ratione recusandae sint ullam. Beatae dolorem eaque inventore omnis quae.
    </div>
    <div>Ab ad aspernatur omnis quam quibusdam quidem, voluptate. Aliquam aut, ipsa maxime mollitia sunt tempora! Atque
        beatae doloremque eius maxime minima necessitatibus nulla officiis quam tenetur unde. Accusantium, id sapiente!
    </div>
    <div>Dignissimos dolore ea, eos, est fugit incidunt ipsam nihil, nobis nulla quis repellat voluptates. A asperiores
        enim eos esse facilis itaque nobis quisquam temporibus, unde voluptatum. Ab dolorum magni quae?
    </div>
    <div>Accusamus architecto asperiores cumque eos esse expedita fugit, incidunt, iure labore laudantium pariatur
        quaerat voluptatibus? Accusamus aliquam aspernatur cumque delectus deleniti doloribus, eius, fugiat, inventore
        nihil nisi obcaecati perspiciatis sequi!
    </div>
    <div>A accusantium aliquid architecto autem consequuntur, earum enim et fuga fugiat illum ipsam magnam
        necessitatibus nihil nobis numquam quam quas repellat repudiandae sequi tempora totam unde ut vitae voluptas,
        voluptates.
    </div>
    <div>Ad aliquam aliquid animi aperiam atque consectetur debitis dolores eligendi error et eveniet exercitationem,
        hic illo ipsum iste modi nobis omnis placeat quam quo repudiandae tempora voluptates! Laborum, minima saepe.
    </div>
    <div>Magni, modi voluptates? Blanditiis cumque dicta dignissimos fugit illo ipsa magnam nesciunt obcaecati quas
        sequi. Laboriosam modi quae quo quod tenetur. At blanditiis doloribus ipsam maxime, quidem quo totam vero.
    </div>
    <div>Commodi dolorem ducimus quia repellendus ullam. Accusamus alias aperiam delectus eius molestias non obcaecati
        officiis, possimus quis quisquam reprehenderit sapiente sequi tempore. Aut eius error esse ex itaque nostrum,
        quaerat.
    </div>
    <div>Debitis earum officiis perspiciatis reiciendis repellat, repudiandae rerum voluptas. Aliquid aperiam asperiores
        aspernatur autem distinctio doloremque ea, et magnam maxime modi, porro quasi qui reprehenderit rerum sunt unde
        ut voluptates!
    </div>
    <div>Accusamus accusantium ad alias aperiam asperiores consectetur corporis dignissimos dolor eligendi eum,
        exercitationem facere illum ipsa iste labore laboriosam minus nulla odio optio quaerat reprehenderit sapiente
        tempora temporibus tenetur voluptatibus?
    </div>
    <div>Aliquam aperiam assumenda atque, blanditiis delectus dignissimos, doloremque earum eligendi et fuga incidunt
        inventore laboriosam, magnam magni nam nihil non obcaecati odio quia quod rem sequi sint unde veniam veritatis.
    </div>
    <div>Laboriosam, qui, totam. Aliquam consequuntur cum cupiditate in laudantium minus nesciunt, odio perferendis
        placeat quaerat, quam rerum sint soluta. Aliquam debitis iste porro praesentium recusandae. Corporis dolores
        eius qui veniam.
    </div>
    <div>A ab adipisci, aspernatur assumenda consectetur cum cumque, cupiditate delectus dolorem earum eius enim esse,
        expedita explicabo illo impedit maiores nesciunt obcaecati quas qui quis ratione suscipit temporibus unde vel?
    </div>
    <div>Accusamus adipisci alias aliquam asperiores assumenda autem deserunt doloremque dolorum ea facere harum, illo
        illum inventore ipsa iste modi molestiae natus perspiciatis provident quia sunt veniam voluptatum! Corporis in,
        iure.
    </div>
    <div>Aperiam at aut cupiditate, deserunt doloremque excepturi expedita fugiat hic illo illum iste itaque magnam
        magni nesciunt nulla omnis placeat possimus quo ratione sint? Accusantium adipisci alias odio repellendus totam!
    </div>
    <div>Alias aspernatur beatae dolores dolorum, labore laborum minus molestiae quis ullam vitae? Ipsam optio suscipit
        voluptatibus! Blanditiis deserunt enim itaque iure laboriosam minus nemo obcaecati possimus quaerat
        reprehenderit! Optio, sint?
    </div>
    <div>Ab accusamus alias asperiores atque, cupiditate, dolores dolorum eaque eligendi est fuga hic in libero minus
        modi molestiae nam nemo, obcaecati porro quis quo quos repellendus reprehenderit totam vel velit.
    </div>
    <div>Ipsam modi, molestias. Aliquid animi, architecto assumenda at corporis cumque deleniti dignissimos dolor ea et,
        ex impedit in ipsum laboriosam laborum omnis quidem quisquam quos repellendus sint sit tempora temporibus.
    </div>
    <div>Aliquam aliquid amet, beatae commodi explicabo iste quisquam similique temporibus voluptate? Aliquam debitis
        deleniti doloremque doloribus expedita explicabo ipsam minus molestias, non nostrum nulla placeat quae ratione
        rerum ut vel?
    </div>
    <div>Accusantium culpa cumque delectus dicta, doloremque magnam nam possimus quasi repudiandae ullam? Accusamus
        animi cum cumque deleniti doloremque, dolorum ea id, modi natus necessitatibus nemo obcaecati provident quia
        sint unde.
    </div>
    <div>Alias assumenda doloremque eligendi eos nam natus odio sequi. A ad amet, architecto delectus deserunt ducimus
        eos inventore, labore laborum natus neque officia officiis possimus rem sed tempora ut voluptates?
    </div>
    <div>Ab ad amet architecto cumque distinctio dolorem eligendi fugit magnam magni maxime necessitatibus nesciunt,
        nihil, nobis nulla qui quis quo quod ut vel, velit voluptate voluptatem voluptates? Doloremque incidunt,
        obcaecati.
    </div>
    <div>Aliquam deleniti dolorum fugit, laboriosam maxime minima molestiae nostrum, nulla officiis tempore ullam veniam
        voluptas voluptatibus! Aliquam animi consectetur exercitationem facilis incidunt iste iusto nisi odit quibusdam
        quo, ullam voluptatibus?
    </div>
    <div>Ea eum expedita facilis maiores nostrum repellendus saepe similique? Assumenda deserunt dignissimos dolorem
        eaque eos fuga fugiat hic maiores perferendis vitae? Consectetur corporis dolor nihil officiis optio perferendis
        sequi totam?
    </div>
    <div>Accusantium ad animi aut cumque dolorem ducimus esse expedita fuga hic labore libero minima nisi nobis numquam
        odio officiis perspiciatis quia quidem, reiciendis suscipit unde velit veritatis voluptate. Blanditiis,
        repellendus!
    </div>
    <div>Debitis distinctio eaque enim eum expedita magnam odit praesentium rem repellat voluptas. A assumenda
        blanditiis dolor doloribus facilis iure molestias nobis numquam omnis perferendis, quaerat reprehenderit,
        tempora veritatis. Est, voluptate.
    </div>
    <div>Alias consequatur corporis deserunt dolore doloremque enim eos illum inventore libero natus nemo nihil optio
        placeat quia quibusdam quisquam quos repellat reprehenderit rerum sapiente sint sit, tempora tempore unde ut!
    </div>
    <div>Ab architecto provident qui quo veritatis. Aperiam ducimus ea esse, hic id iste itaque laboriosam minima
        molestiae numquam odit qui quisquam soluta suscipit totam vero voluptate? Nam non qui recusandae.
    </div>
    <div>Accusamus, alias animi at facere fugit ratione repudiandae ullam. Accusantium consequuntur cum cupiditate eaque
        earum esse fuga laboriosam laudantium maxime modi nemo nesciunt, numquam odio porro quam similique soluta
        suscipit.
    </div>
    <div>Amet animi dolore doloremque error excepturi fugiat illum, iure molestias nam placeat quo reiciendis rem
        voluptate! Amet deserunt dolor doloremque, ex incidunt ipsum iure laudantium neque, nobis quam vero, voluptatem.
    </div>
    <div>Autem facere nulla quo, rerum sapiente tempora vel! At eum labore nisi ut? Autem fugiat laboriosam maxime unde
        voluptatibus. Error est explicabo fugiat laudantium natus praesentium quisquam, rem suscipit totam?
    </div>
    <div>Aut doloremque error explicabo sed temporibus! Accusantium, alias aliquid architecto culpa delectus, excepturi
        id ipsum, iusto non omnis quis tempora velit! Consectetur delectus deserunt dolor ea odio quas repellendus
        totam?
    </div>
    <div>Consequatur debitis delectus dolores ea error eum fugit ipsum natus odit perferendis qui sunt, voluptates.
        Accusamus alias est et expedita inventore ipsam, ipsum labore libero, minus perferendis quibusdam quidem
        sapiente.
    </div>
    <div>At atque blanditiis culpa dolore, doloremque doloribus dolorum eligendi, esse eveniet exercitationem expedita
        laudantium molestiae necessitatibus nemo officia optio placeat quas quibusdam quidem, sapiente sequi similique
        sit tenetur veniam voluptas.
    </div>
    <div>Blanditiis expedita fugiat iusto neque nihil praesentium quibusdam recusandae repellendus tempora! Aperiam enim
        ex nostrum repellendus sequi! Aspernatur, consequatur culpa cupiditate, dignissimos error fugiat illo molestias
        reprehenderit sed unde voluptatum.
    </div>
    <div>A ab aperiam autem commodi culpa deleniti distinctio eos, eum excepturi, fugit id illo impedit in ipsa laborum
        magni nemo obcaecati perferendis quia repellat, repellendus tempora veritatis vero voluptas voluptatibus?
    </div>
    <div>Consectetur delectus, deleniti deserunt dignissimos eius incidunt ipsam libero magni minima modi molestiae
        optio perferendis, qui sit vitae! Atque esse labore natus omnis optio, placeat sapiente! Cumque est facilis
        repudiandae?
    </div>
    <div>Adipisci alias aliquam architecto atque commodi deleniti deserunt dignissimos dolor, enim eveniet ex facilis
        illum in labore mollitia numquam officia optio quo recusandae reiciendis, sint sunt suscipit temporibus unde,
        voluptatibus.
    </div>
    <div>Aliquam enim ex mollitia nesciunt! Accusamus amet at autem commodi cupiditate doloribus dolorum eius fugit
        labore laudantium magni nemo, nihil nostrum officia officiis perspiciatis placeat quam quis similique sit ullam.
    </div>
    <div>Fugit quas quidem repellendus. Alias, asperiores blanditiis dicta dolore earum, ex harum in ipsam non,
        perferendis provident quia sapiente sequi soluta sunt veritatis voluptate. Accusantium blanditiis eveniet
        pariatur quisquam voluptates.
    </div>
    <div>Aliquam aliquid asperiores beatae, cum eos facilis fugiat hic inventore, officia quis rem reprehenderit, rerum
        vitae. Dolorum et, eveniet exercitationem expedita minus nesciunt nisi odit omnis quisquam quos, repudiandae
        temporibus!
    </div>
    <div>Alias earum error expedita magni odit quas similique unde. Doloremque id impedit, ipsam iste minus quae quidem
        repellendus. Aperiam at ex fugiat ipsam modi, numquam reiciendis. Aperiam deleniti dolore possimus.
    </div>
    <div>A ab, delectus dolore expedita maxime placeat quod reprehenderit? Ad consectetur consequatur cum cupiditate
        delectus dolorum illum iste magnam maxime molestiae, molestias officiis qui quis recusandae saepe sunt totam,
        voluptates!
    </div>
    <div>Cum, dignissimos distinctio dolor explicabo itaque nemo quia voluptas? A accusantium esse ex facere, harum
        minus non nostrum officiis optio pariatur porro quas quod repudiandae, sapiente sequi tempora, unde vero!
    </div>
    <div>A accusantium adipisci alias asperiores aut autem blanditiis cumque distinctio, enim explicabo impedit nemo
        odit omnis pariatur placeat quo ratione rem repellat repellendus repudiandae sint soluta tempora totam voluptate
        voluptatum!
    </div>
    <div>A, aliquid architecto atque autem culpa cumque deserunt doloremque ducimus eligendi eveniet harum illo in nihil
        obcaecati optio perferendis qui sapiente! Aliquid culpa facilis impedit maiores neque repellendus, similique
        voluptatibus?
    </div>
    <div>A ad, aut blanditiis ducimus earum eos in inventore modi nostrum odio odit officia omnis praesentium quaerat
        quibusdam, quisquam quos rem sapiente, sit ut. Commodi consectetur cumque quisquam recusandae ut!
    </div>
    <div>Perferendis, repudiandae sapiente. Culpa deleniti, dignissimos dolores earum excepturi id ipsa ipsum natus
        officia quam repellendus reprehenderit sapiente soluta tempore voluptatem! Aliquam eos esse, explicabo fugit
        minima molestias provident reiciendis!
    </div>
    <div>A corporis dolorem ea esse, facere facilis hic, iure mollitia necessitatibus nostrum numquam porro rem sequi.
        Dicta est, fugiat impedit in minima natus numquam possimus qui sunt suscipit ullam voluptatem?
    </div>
    <div>Atque eos facilis minima nesciunt omnis sit voluptas voluptates? Aperiam, cumque cupiditate deserunt ducimus
        facilis harum libero molestiae nesciunt nihil odio, officia quibusdam reiciendis repellat repellendus temporibus
        ut, voluptas voluptatum!
    </div>
    <div>Aut beatae commodi culpa cumque, deserunt dicta dolorem eaque eligendi est et exercitationem explicabo facere
        itaque labore magnam magni non nulla obcaecati optio pariatur quaerat quas quidem repudiandae tempora tenetur?
    </div>
    <div>Aliquam animi beatae blanditiis consectetur corporis cupiditate dicta dolores enim esse facilis in mollitia
        necessitatibus obcaecati odio, odit quaerat qui quia quis vero voluptates. Autem eum expedita mollitia nam
        neque.
    </div>
    <div>Aut corporis dicta, eius, esse fugiat harum illo ipsa ipsam iure laborum maiores necessitatibus nostrum officia
        pariatur quam rerum sapiente sit totam, velit voluptatum! Eveniet expedita neque nesciunt porro ut.
    </div>
    <div>Accusantium alias, aliquam consectetur consequatur consequuntur corporis cumque distinctio dolorem ducimus
        eligendi esse hic illo labore laboriosam libero natus nobis omnis quas quia quo sed sint totam ut. Accusantium,
        non.
    </div>
    <div>Aut deserunt dolor dolorum ducimus hic illum, iste iure labore magnam nihil nulla, perferendis quam quas
        quisquam rerum sed ullam ut. Ad, aut culpa ducimus ipsam laboriosam maxime minima sunt.
    </div>
    <div>Aliquam aliquid aperiam atque, distinctio dolor eligendi explicabo facere impedit libero, molestias natus nemo
        obcaecati officia provident quae quia quod unde veniam. Ab, beatae consequuntur eligendi ex numquam recusandae
        repellat.
    </div>
    <div>Distinctio enim fugiat nesciunt nisi nobis odit, perferendis ratione recusandae voluptate voluptates. A
        corporis doloribus illo quidem rem? Cupiditate eos fuga impedit in ipsum iste non pariatur quam, quia
        repellendus.
    </div>
</div>
</body>
</html>